*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-style: normal;
  }
  html{
    font-size: calc(100/375*100vw);
  }
  body{
    font-size: 16px;
  }
  html,body,#root{
    width: 100%;
    height: 100%;
  }
  
  .box{
    width: 375px;
    height: 6.65rem;
    background: #f5f5f5;
    overflow-y: auto;
    &::-webkit-scrollbar{
      display: none;
    }
    .mod_download{
      margin: 15px;
      background-color: #fff;
      border-radius: 15px;
      padding: 16px;
      // box-sizing: border-box;
      box-shadow: 0 5px 10px rgb(0 0 0 / 15%);
      .pictext {
        position: relative;
        display: flex;
        .download_logo{
          width: 50px;
          height: 50px;
          img{
            max-width: 100%;
          }
        }
        .download_desc {
          position: relative;
          padding: 5px 16px;
          display: block;
          flex: 1;
          .download_title {
            font-size: 16px;
            color: #394043;
            line-height: 1;
            margin-top: 2px;
          }
          .download_sub {
            font-size: 11px;
            color: #9c9fa1;
            line-height: 1;
            margin-top: 9px;
          }
        }
        .download_btn {
          width: 85px;
          height: 32px;
          line-height: 32px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          right: 0;
          text-align: center;
          background-color: #00ae66;
          color: #fff;
          border-radius: 5px;
          font-size: 14px;
        }
      }
    }
    .home_header {
      width: 100%;
      height: 225px;
      line-height: 225px;
      // background-color: red;
      background: url(https://s1.ljcdn.com/hulk-web/static/m/statics/images/home/head_bg.jpg?version=a5631a9bcb) 50% no-repeat;
      background-size: cover;
      color: #fff;
      .top {
        display: flex;
        height: 45px;
        line-height: 45px;
        padding: 0 4px 0 15px;
        box-sizing: border-box;
        .box_col{
          flex: 1;
          a{
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            color: #000;
            .switch_city{
                display: inline-block;
                padding: 0px 8px;
                height: 24px;
                line-height: 24px;
                background: rgba(0,0,0,.5);
                border-radius: 15px;
                vertical-align: middle;
                text-align: center;
                // vertical-align: middle;
                .city {
                  font-size: 13px;
                  color: #fff;
                }
                .icon_pull {
                  background-position: 0 -1.3rem;
                  -webkit-transform: scale(.36,.42);
                  transform: scale(.36,.42);
                }
                .icon_pull{
                  display: inline-block;
                  width: 0.3rem;
                  height: 0.3rem;
                  // margin: 0 -0.5rem;
                  background-repeat: no-repeat;
                  background-image: url(https://s1.ljcdn.com/hulk-web/static/m/statics/images/common/sprite.svg?version=fff7459eb2);
                  background-size: 0.3rem 9.25rem;
                  vertical-align: middle;
                  -webkit-transform: scale(.5);
                  transform: scale(.5);
                }
            }
          }
        }
        .my {
          display: inline-block;
          width: 40px;
          height: 100%;
          line-height: 0px;
          padding-top: 8px;
          font-size: .75rem;
          color: #fff;
          text-align: center;
          box-sizing: border-box;
          .icon_user {
            width: 30px;
            height: 30px;
            background-size: 0.3rem;
            background-position: 0 -2.5rem;
            margin: 0;
          }
          .icon_user {
            font-size: 0;
            display: inline-block;
            background-image: url(https://s1.ljcdn.com/hulk-web/static/m/statics/images/common/sprite_new.svg?version=fbfaa12fa5);
            background-repeat: no-repeat;
            // background-position: 0 0;
            // -webkit-transform: none;
            transform: none;
          }
        }
      }
      .content {
        position: relative;
        width: 100%;
        height: 1.8rem;
        .slogan {
          position: absolute;
          width: 202px;
          height: 62px;
          background: url(https://s1.ljcdn.com/hulk-web/static/m/statics/images/home/head_slogan.png?version=0d0f8a8e4a) 50% no-repeat;
          background-size: 100%;
          font-size: 0;
          top: 11px;
          left: 50%;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
        }
        .search_box {
          height: 35px;
          position: absolute;
          width: auto;
          bottom: 3px;
          left: 11px;
          right: 11px;
          background: #fff;
          border: 0;
          margin: 12px 0;
          display: block;
          padding-left: 22.5px;
          overflow: hidden;
          box-sizing: border-box;
          .icon_search_gray {
            position: absolute;
            transform: scale(.5);
            left: 4px;
            top: 4.5px;
            margin: -0.5px;
            background-position: 0 -1.6rem;
            display: inline-block;
            width: 0.3rem;
            height: 0.3rem;
            background-repeat: no-repeat;
            background-image: url(https://s1.ljcdn.com/hulk-web/static/m/statics/images/common/sprite.svg?version=fff7459eb2);
            background-size: 0.3rem 9.25rem;
            vertical-align: middle;
          }
          input{
            margin-right: 2px;
            border: 0;
            vertical-align: top;
            width: 100%;
            height: 35px;
            line-height: 35px;
            padding: 0 8px;
            background-color: #fff;
            font-size: 14px;
            box-sizing: border-box;
            outline: none;
          }
        }
      }
    }
    .content_area {
      width: 100%;
      height: 38rem;
      // background-color: red;
      .mod_box:first-child {
        margin-top: 0;
        border-top: 0;
      }
      .mod_box {
        padding-right: 20px;
        margin-top: 12px;
        padding: 0 0 0 20px;
        background-color: #fff;
        border-top: 1px solid #e5e5e5;
      }
      .channel_nav {
        width: 375px;
        height: 202px;
        box-sizing: border-box;
        padding: 5px 20px 10px;
        margin-top: 0;
        background-color: #fff;
        .gridbox{
          width: 100%;
          height: 100%;
          .box_col {
            width: 25%;
            height: 50%;
            float: left;
            box-sizing: border-box;
            text-align: center;
            margin-bottom: 0;
            // background-color: red;
            .icon_img {
              display: inline-block;
              width: 70px;
              height: 58px;
              margin: 7px;
              img{
                width: 50px;
                height: 50px;
              }
            }
            .name {
              margin-top: 0;
              color: #222;
              font-size: 14px;
              // background-color: #fff;
            }
          }
        }
      }
      .data_channel {
        width: 100%;
        height: 150px;
        padding: 0 20px 0 20px;
        background-color: #fff;
        .channel_box{
          width: 100%;
          height: 100%;
          margin: 0;
          .title {
            position: relative;
            height: 54px;
            line-height: 54px;
            border-bottom: 1px solid #e5e5e5;
            a {
              display: block;
              color: #333;
              // font-size: 1rem;
              font-weight: 600;
            }
          }
          .tool_list_wrap {
            padding: 20px 0 0;
            box-sizing: border-box;
            height: 94px;
            margin: 0;
            .box_col {
              width: 20%;
              float: left;
              box-sizing: border-box;
              text-align: center;
              font-size: 14px;
              color: #000;
              .icon_img {
                display: inline-block;
                width: 25px;
                height: 25px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .link {
              margin-bottom: 20px;
            }
          }
        }
      }
      .house_lists {
        width: 100%;
        height: 3140px;
        padding: 0 20px 0 20px;
        .mod_tit {
          position: relative;
          height: 54px;
          line-height: 54px;
          color: #333;
          // font-size: 1rem;
          font-weight: 700;
          border-bottom: 1px solid #e5e5e5;
          margin: 0;
          a {
            display: block;
            width: 100%;
            color: #333;
            .right {
              float: right;
              display: inline-block;
              font-weight: 400;
              .mod_tab {
                margin-left: 12px;
              }
              .mod_tab.active{
                color: #00ae65;
              }
              .gray {
                font-size: 13px;
                color: #9fa3a5;
              }
            }
          }
        }
        .mod_cont{
          width: 100%;
          height: auto;
          // background-color: red;
          ul{
            width: 100%;
            height: 100%;
            .pictext {
              padding: 12px 12px 12px 0;
              border-bottom: 1px solid #e5e5e5;
              position: relative;
              .flexbox {
                width: 100%;
                height: 100%;
                display: flex;
                .mod_media{
                  width: 108px;
                  position: relative;
                  height: 81px;
                  text-align: center;
                  .media_main{
                    width: 108px;
                    position: relative;
                    height: 81px;
                    text-align: center;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                    .vr_item {
                      position: absolute;
                      left: 7px;
                      bottom: 7px;
                      border: 1px solid hsla(0,0%,100%,.8);
                      border-radius: 50%;
                      width: 20px;
                      height: 20px;
                      z-index: 99;
                      i {
                        background: url(https://s1.ljcdn.com/hulk-web/static/m/statics/images/ershoufang/vr-animation.png?version=3c9a8cfde7) no-repeat;
                        background-size: 19px auto;
                        width: 20px;
                        height: 20px;
                        -webkit-animation: vrIcon 3.5s steps(53) infinite;
                        animation: vrIcon 3.5s steps(53) infinite;
                        display: block;
                      }
                    }
                  }
                }
                .item_list {
                  display: block;
                  flex: 1;
                  padding-left: 20px;
                  overflow: hidden;
                  .item_main {
                    max-height: 33px;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    margin-bottom: 7px;
                    line-height: 17px;
                    overflow: hidden;
                    // font-size: 1rem;
                    color: #394043;
                    .goodhouse_icon {
                      position: relative;
                      top: -1px;
                      width: 46px;
                      height: 16px;
                      margin-right: 0;
                    }
                  }
                  .item_other.text_cut {
                    color: #9399a5;
                  }
                  .item_other {
                    margin-bottom: 7.2px;
                    line-height: 14px;
                    // font-size: 1.2rem;
                    // color: #333;
                    font-size: 12px;
                  }
                  .item_minor {
                    margin-bottom: 7.2px;
                    line-height: 14px;
                    // font-size: 1.2rem;
                    color: #333;
                    font-size: 12px;
                    .price_total {
                      color: #fa5741;
                      font-size: 15px;
                      font-weight: 600;
                      white-space: nowrap;
                      vertical-align: middle;
                      margin-right: 5px;
                      .unit {
                        font-size: 13px;
                        margin-left: 2px;
                      }
                    }
                    .unit_price {
                      color: #9c9fa1;
                      font-size: 12px;
                      vertical-align: middle;
                      margin-right: 2px;
                    }
                  }
                  .tag_box {
                    line-height: 15px;
                    margin-top: -1.8px;
                    min-height: 44px;
                    .tag {
                      margin: 0 2.4px 2px 0;
                      line-height: 15px;
                      vertical-align: top;
                      display: inline-block;
                      // line-height: 1em;
                      padding: 2px 4px;
                      font-size: 12px;
                      border-radius: 1px;
                    }
                  }
                }
              }
            }
            .pictext .a_mask {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              z-index: 1;
            }
            .btn {
              margin: 16px 0 5px;
              font-family: PingFangSC-Medium;
              // font-size: 1rem;
              color: #00ae65;
              border-radius: 1px;
              height: 49px;
              line-height: 49px;
              background-color: #f9f9f9;
              font-weight: 700;
              display: block;
              width: 100%;
              text-align: center;
            }
          }
        }
      }
      .footer {
        width: 100%;
        height: 313px;
        margin-top: 12px;
        padding: 0 15px;
        background: #2f3130;
        color: #727373;
        text-align: center;
        z-index: 10;
        .nav {
          height: 33px;
          line-height: 33px;
          text-align: left;
          border-bottom: 1px solid #3e403f;
          font-size: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .location{
            color: #939494;
            h1 {
              display: inline;
              margin: 0;
            }
          }
          .location_sp {
            display: inline-block;
            opacity: .5;
            border-left: 1px solid #999;
            height: 7px;
            margin: 0 7.5px;
          }
          a {
            color: #727373;
          }
        }
        .link_box {
          width: 100%;
          height: 188px;
          padding: 16px 0 0;
          .link_tit {
            display: flex;
            height: 32px;
            line-height: 32px;
            h3:first-child {
              margin-left: 0;
            }
            h3:last-child {
              margin-right: 0;
            }
            h3.active {
              background-color: #3c3f3d;
              color: #fff;
            }
            h3{
              color: #6e6e6e;
              position: relative;
              flex: 1;
              text-align: center;
              font-size: 14px;
              font-weight: 600;
              background-color: #212121;
              margin: 0 8px;
            }
            .text_cut {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .link_cont {
          padding: 10px 0;
          height: 140px;
          ul{
            font-size: 14px;
            li {
              padding-left: 8px;
              height: 30px;
              line-height: 30px;
              list-style-type: disc;
              list-style-position: inside;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
            }
            .box_col {
              width: 33.33333%;
              float: left;
              box-sizing: border-box;
              text-align: center;
              i{
                unicode-bidi: isolate;
                font-variant-numeric: tabular-nums;
                text-transform: none;
                text-indent: 0px !important;
                text-align: start !important;
                text-align-last: start !important;
              }
              a {
                color: #828383;
  
              }
            }
          }
        }
      }
    }
  }